<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 盒子模型-边框</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            margin-bottom: 10px;
            background-color: lightcoral;
        }
        /*1. 每一条边分别设置(分开设置,四个值)*/
        .d1{
            border-top: blue 5px solid;     /* 盒子的上边框线 */
            border-right: red 4px dotted;   /* 盒子的右框线 */
            border-bottom: green 3px dashed;/* 盒子的下框线 */
            border-left: purple 3px double;/* 盒子的左框线 */
        }
        /*2. 两个值: 将上下两边设置一样,左右两边设置一样 (第一个值:上下 第二个值:左右)*/
        .d2{
            border-width: 10px 5px;
            border-style: solid dotted;
            border-color: red blue;
        }
        /*3.三个值: 第一个值是上,第二个值是左右,第三个值是下*/
        .d3{
            border-width: 10px 6px 4px;
            border-style: solid dotted dashed;
            border-color: red blue purple;
        }
        /*4. 一个值:代表四个方向取值是一样的*/
        .d4{
            /*border-width: 10px;*/
            /*border-style: solid ;*/
            /*border-color: red;*/
            /*简化为:*/
            border: 10px solid red;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
</body>
</html>